<template>
  <div class="w100 h100 default-framework-container">
    <div class="form-box" v-show="activeName === 'second'">
      <el-form
        :inline="true"
        ref="form"
        :model="form"
        label-width="80px"
        size="small"
      >
        <el-form-item label="组件名称">
          <el-input v-model="form.mainTitle"></el-input>
        </el-form-item>
        <el-form-item label="组件类型">
          <el-select
            clearable
            v-model="form.componentName"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in compTypeList"
              :label="item.compTypeName"
              :value="item.compTypeCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-button class="btn-icon" size="medium" @click="reset">
          <span class="el-icon-refresh" />
        </el-button>
        <el-button size="medium" class="btn-icon" @click="searchComponentDatas">
          <span class="el-icon-search" />
        </el-button>
      </el-form>
    </div>
    <el-tabs v-model="activeName" class="framework-tabs">
      <el-tab-pane label="通用空白组件" name="first">
        <el-collapse v-model="activeComponentName" accordion>
          <el-collapse-item
            v-for="(typeItem, typeIndex) in commonComponentDatas"
            :key="typeIndex"
            :title="typeItem.label"
            :name="typeIndex + ''"
          >
            <div class="components-container">
              <div
                class="components-row"
                v-for="(component, componentIndex) in typeItem.list"
                :key="componentIndex"
              >
                <div class="components-infos-box">
                  <div>{{ component.label }}</div>
                </div>
                <div class="preview-box">
                  <div
                    class="preview"
                    draggable="true"
                    :style="
                      ({ width: '100%', height: '100%' },
                      {
                        backgroundImage: component.previewImage
                          ? component.previewImage.indexOf('https') < 0
                            ? `url(../../../../../../static/images/reportMgr/backgroundImage/${component.previewImage}.png)`
                            : `url(${component.previewImage})`
                          : null,
                      })
                    "
                    @dragstart="handleDragCol($event, component)"
                    @dragend="hanDragColEnd($event, component)"
                  ></div>
                </div>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <el-tab-pane label="组件模板" name="second">
        <div
          v-if="activeName === 'second'"
          class="components-container my-components-container"
        >
          <div
            class="my-components-row components-row"
            v-for="(component, componentIndex) in userComponentDatas"
            :key="componentIndex"
            draggable="true"
            @dragstart="handleDragCol($event, component)"
            @dragend="hanDragColEnd($event, component)"
          >
            <div class="components-infos-box">
              <div>{{ component.mainTitle }}</div>
              <div style="font-size: 12px; color: #a3adb6">
                {{ component.secondTitle }}
              </div>
            </div>
            <div class="preview-box" style="height: 150px">
              <div class="preview" :style="{ width: '100%', height: '100%' }">
                <div class="cover-box"></div>
                <component
                  :mainTitle="component.mainTitle"
                  :title="component.componentName"
                  :is="`custom-report-component-${component.componentName}`"
                  :dataKey="component.dataKey"
                  :componentData="component.componentData"
                  :api="component.api"
                  :method="component.method || 'get'"
                  :changeSize="changeSize"
                />
                <el-button
                  @click.stop="removeComTem(component.id)"
                  class="btn-icon el-icon-delete cur-p remove"
                ></el-button>
              </div>
            </div>
          </div>
        </div>
        <el-row>
          <el-pagination
            :current-page="pageInfo.currentPage"
            :page-sizes="[10, 15, 20, 30]"
            :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.totalRecord"
            style="margin-top: 5px"
            @size-change="sizeChange"
            @current-change="currentPageChange"
          />
        </el-row>
      </el-tab-pane>
      <el-tab-pane
        label="公用组件"
        name="third"
        v-if="overviewList.includes(chartLayoutName)"
      >
        <div
          v-if="activeName === 'third'"
          class="components-container my-components-container"
        >
          <div
            class="my-components-row components-row"
            v-for="(component, componentIndex) in publicComponentDatas"
            :key="componentIndex"
            draggable="true"
            @dragstart="handleDragCol($event, component)"
            @dragend="hanDragColEnd($event, component)"
          >
            <div class="components-infos-box">
              <div>{{ component.mainTitle }}</div>
              <div style="font-size: 12px; color: #a3adb6">
                {{ component.secondTitle }}
              </div>
            </div>
            <div class="preview-box" style="height: 150px">
              <div class="preview" :style="{ width: '100%', height: '100%' }">
                <div class="cover-box"></div>
                <component
                  :mainTitle="component.mainTitle"
                  :title="component.componentName"
                  :is="`custom-report-component-${component.componentName}`"
                  :dataKey="component.dataKey"
                  :componentData="component.componentData"
                  :api="component.api"
                  :method="component.method || 'get'"
                  :changeSize="changeSize"
                />
                <el-button
                  @click.stop="removeComTem(component.id)"
                  class="btn-icon el-icon-delete cur-p remove"
                ></el-button>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import colStyle from "../../mixins/methods/col-style";
import customReports from "../../previewReport";
import nt from "../../../network";
import {
  componentDatas,
  overviewList,
  compTypeList,
} from "../../data/variable";

export default {
  name: "default-framework",
  mixins: [colStyle],
  props: ["chartLayoutName"],
  components: { ...customReports },
  data() {
    return {
      changeSize: "",
      overviewList,
      form: {
        mainTitle: null,
        componentName: null,
      },
      pageInfo: { currentPage: 1, pageSize: 10, totalRecord: 0 },
      activeName: "first",
      activeComponentName: "0",
      compTypeList,
      commonComponentDatas: [],
      userComponentDatas: [],
      publicComponentDatas: [],
      queryData: {
        label: null,
        height: null,
        col: null,
        type: null,
      },
      options: {
        heightOptions: [],
        colOptions: [],
        typeOptions: [],
      },
    };
  },
  methods: {
    resize() {
      this.changeSize = new Date();
    },
    handleDragCol(event, col) {
      col.title = col.label;
      col.changeType = "add";
      delete col.tenantId;
      delete col.id;
      this.$emit( "drag-col-start", event, col);
    },
    hanDragColEnd(event, col) {
      this.$emit( "drag-col-end", event, col);
    },
    sizeChange(pageSize) {
      this.pageInfo.pageSize = pageSize;
      this.getUserComponentDatas();
    },
    currentPageChange(currentPage) {
      this.pageInfo.currentPage = currentPage;
      this.getUserComponentDatas();
    },
    searchComponentDatas() {
      this.pageInfo.currentPage = 1;
      this.getUserComponentDatas();
    },
    getUserComponentDatas() {
   
    },
    removeComTem(id) {
      this.$confirm("是否删除此模板?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          nt.doRequest({
            method: "delete",
            uri: "/paas/chart-layout/v1/chart/component/delete/" + id,
            onSuccess: (resp) => {
              this.$message.success("删除成功");
              this.getUserComponentDatas();
            },
          });
        })
        .catch(() => {});
    },
    getTypeList() {
      let content = [
        {
          label: "比较型图表",
          list: ["radar", "bar", "line", "progress"],
        },
        {
          label: "展示型图表",
          list: ["title", "table", "description"],
        },
        { label: "趋势型图表", list: ["line"] },
        { label: "计量占比型图表", list: ["pie", "liquid"] },
        { label: "指标型图表", list: ["liquid", "gauge"] },
        { label: "聚集频率型图表", list: ["heatmap"] },
        { label: "数据转化型图表", list: ["funnel"] },
        { label: "关系型图表", list: ["sankey"] },
      ];

      let copyComponentDatas = JSON.parse(JSON.stringify(componentDatas));
      let typeList = content.map((item) => {
        return {
          label: item.label,
          list: item.list.map((listItem) => {
            return copyComponentDatas[listItem];
          }),
        };
      });
      typeList.forEach((typeItem) => {
        typeItem.list = typeItem.list.filter((item) => {
          item = item || {};
          return item.type === "common" || item.type === this.chartLayoutName;
        });
      });
      this.commonComponentDatas = typeList;
    },
    getPublicComponentDatas() {
      nt.doRequest({
        method: "get",
        uri: "paas/chart-layout/v2/chart/getModule/" + this.chartLayoutName,
        onSuccess: (resp) => {
          if (!resp.data.content) return;
          this.publicComponentDatas = resp.data.content.map((item) => {
            return {
              componentData: JSON.parse(item.component || "{}"),
              ...item,
            };
          });
          this.$nextTick(() => {
            this.resize();
          });
        },
      });
    },
    reset() {
      this.form = { mainTitle: null, componentName: null };
      this.pageInfo = { currentPage: 1, pageSize: 10, totalRecord: 0 };
      this.getUserComponentDatas();
    },
  },
  mounted() {
    this.getUserComponentDatas();
    this.getTypeList();
    this.getPublicComponentDatas();
    //加载通用的组件
  },
  emits: ["drag-col-start", "drag-col-end"],
};
</script>

<style lang="scss" scoped>
@import "../../styles/variable.scss";
.default-framework-container {
  margin: 10px;
  .form-box {
    width: 100%;
    .el-input {
      width: 150px;
    }
    .el-select {
      width: 150px;
    }
  }
  .framework-tabs {
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  @include default-flex;
  flex-wrap: wrap;
  flex-flow: column;
  height: 100%;
  background: #fff;
  box-sizing: border-box;
  padding: 0 10px;
  .editorTitle {
    text-align: left;
    font-size: 16px;
  }
  .components-container {
    @include default-flex;
    width: 100%;
    flex: 1;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 5px;
    overflow: auto;
    & .components-row {
      @include default-flex;
      @include default-col-radius;
      @include boxShadow;
      align-items: flex-start;
      flex-flow: wrap;
      padding: 0 10px;
      box-sizing: border-box;
      width: 45%;
      min-height: 200px;
      margin: 10px 2.5%;
      background-color: #f5f5f5;
      & .components-infos-box {
        width: 100%;
        margin-top: 15px;
        text-indent: 5px;
      }
      & .preview-box {
        @include default-flex;
        width: 100%;
        height: calc(100% - 40px);
        & .preview {
          display: flex;
          align-items: center;
          position: relative;
          width: 100%;
          height: 180px;
          background-repeat: no-repeat;
          @include cur-all;
          @include default-background-img;
          .cover-box {
            position: absolute;
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 5;
          }
          &:hover .remove {
            display: block;
          }
          .remove {
            display: none;
            position: absolute;
            top: -15px;
            right: 5px;
            z-index: 5;
          }
        }
      }
    }
    & .components-row.my-components-row {
      display: block;
      padding-bottom: 10px;
    }
  }
}
</style>
